/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 * Layout
 */

#sozi-editor-view-timeline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 2.5em);
    overflow-y: auto;
    color: white;
    background: rgb(80, 80, 80);
}

#sozi-editor-view-timeline > div {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.timeline-top-left,
.timeline-top-right,
.timeline-bottom-left,
.timeline-bottom-right {
    position: absolute;
    width: 50%;
    height: 50%;
    overflow: hidden;
}

.timeline-top-left,
.timeline-top-right {
    top: 0;
}

.timeline-bottom-left,
.timeline-bottom-right {
    bottom: 0;
    /* Always-visible horizontal scrollbar in left and right bottom tables.
     * Required for alignment between rows. */
    overflow-x: scroll;
}

.timeline-top-left,
.timeline-bottom-left {
    left: 0;
}

.timeline-top-right,
.timeline-bottom-right {
    right: 0;
}

.timeline-top-right,
.timeline-bottom-right {
    /* Always-visible vertical scrollbar in top and bottom right tables.
     * Required for alignment between columns. */
    overflow-y: scroll;
}

.timeline {
    border-collapse: separate;
    border-spacing: 0 2px;
}

.timeline input,
.timeline button,
.timeline select {
    width: 100%;
}

.timeline td,
.timeline th.frame-index,
.timeline th.frame-title,
.timeline th.layer-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 8em;
    max-width: 8em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.timeline th.layer-icons {
    width: auto;
    text-align: left;
    white-space: nowrap;
}

.timeline .layer-label {
    text-align: left;
    border-bottom-left-radius: 0.5em;
    border-top-left-radius: 0.5em;
}

.timeline .layer-icons .visibility,
.timeline .layer-icons .remove {
    margin-right: 0.5em;
}

.timeline .layer-label .remove {
    display: none;
}

.timeline .layer-label:hover .remove {
    display: inline;
}

.timeline .frame-title {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
}

.timeline .frame-index .insert-before {
    float: left;
    position: relative;
    top: 0.5em;
}

.timeline .frame-index .insert-after {
    float: right;
    position: relative;
    top: 0.5em;
}

.timeline .frame-index i {
    display: none;
}

.timeline .frame-index:hover i {
    display: inline;
}

.timeline .collapse {
    visibility: collapse;
}

/*
 * Colors
 */

.timeline-bottom-right td {
    color: rgb(80, 80, 80);
}

.timeline td,
.timeline th.frame-index,
.timeline th.frame-title {
    border-left: 2px solid rgb(80, 80, 80);
}

.timeline .even {
    background: rgb(200, 200, 200);
}

.timeline .odd {
    background: rgb(230, 230, 230);
}

.timeline .link {
    border-left: none;
}

.timeline .selected {
    background: rgb(200, 220, 220);
}

.timeline th.selected {
    color: black;
}

.timeline .selected.current {
    background: rgb(150, 200, 200);
}

.timeline .frame-index.selected {
    color: rgb(200, 220, 220);
    background: transparent;
}

/*
 * Fonts
 */

.timeline td,
.timeline th.frame-index,
.timeline th.frame-title,
.timeline th.layer-label {
    font-weight: normal;
}

.timeline .frame-index.selected {
    font-weight: bold;
}

/*
 * Behavior
 */

.timeline {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.timeline td,
.timeline th.frame-index,
.timeline th.frame-title,
.timeline th.layer-label {
    cursor: default;
}
